<?php
	session_start();

	if(isset($_SESSION['username'])){
		if($_SESSION['admin'])
			header("Location: host");
		else
			header("Location: client");
	}	
?>

<!DOCTYPE html>
<html>
<head>
	<title>Direct Order</title>	
	<!-- THIS INCLUDES THE LINKS TO THE CSS PAGES -->
	<?php include("styles/head_links.php"); ?>
	<style type="text/css">
		#logo{
			text-align: center;
			font-size: 3em;
			padding: .5em;
		}
		#main_container{
			width: 60em;
		}
		#login, #signUp{
			position: relative;
			display: inline-block;
			width: 27em;
			margin: 5em 0;
			padding: 0 .5em;
		}
		#login{
			top: 50%;
			transform: translateY(-50%);
			text-align: left;
		}
		#signUp{
			border-left: .1em solid;
			text-align: right;
			padding-left: 5em;
		}
		label{
			display: inline-block;
			width: 5em;
			text-align: right;
			margin-right: .2em;
		}
		.input_container{
			/*display: inline-block;*/
			margin: .5em auto;
			text-align: left;
		}
		#login_submit, #sign_submit{
			display: block;
			text-align: center;
			margin: 1em auto;
			padding: .5em;
		}
		input, select{
			font-size: 1em;
			border: .1em solid;
		}

	</style>
</head>
<body>
	<div id="logo">
	<h1>
		DirectOrder
	</h1>
	</div>
	<div id="main_container">
		<!-- FIRST (LEFT) FORM -->
		<div id="login">
			<div id="login_error" class="error"> </div>
			<form name="login_form" method="POST" > 
				<div class="input_container">
					<label>Username:</label>
					<input id='login_user' type="text" maxlength="16" name="login_username" required autofocus>
				</div>
				<div class="input_container">
					<label>Password:</label>
					<input id='login_pass' type="password" maxlength="16" name="login_password" required>
				</div>
				<div class="input_container">
					<label>Number of guests:</label>
					<input id='login_numG' type="number" name="login_numGuests" max=10 min=1 step=1 value=1 class="tiny" required>
				
					<label class="tiny">Table:</label>
					<select id='login_table' name="login_table" class="small" required>
						<option selected disabled value="">Select</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
					</select>
				</div>
			<div id="login_submit" class="input_container">
				<!-- <button type="submit" id="login_button" class="small" name="button" value="Login">Login</button> -->
				<input id="login_button" class="small" name="button" type="button" value="Login" onClick="onLoginSubmit()"
					onmouseover="this.style.background='#AAE4F7'" onmouseout="this.style.background='#F8E0F7'"> 
			</div>
		</form>
	</div>
	<!-- SECOND (RIGHT) FORM -->
	<div id="signUp">
		<div id="signup_error" class="error"> </div>
		<form name="sign_form"  method="POST">
			<div class="input_container">
				<label>Name:</label>
				<input id="signup_name" type="text" maxlength="32" name="sign_name" required>
			</div>
			<div class="input_container">
				<label>Surname:</label>
				<input id="signup_surname" type="text" maxlength="32" name="sign_surname" required>
			</div>
			<div class="input_container">
				<label>Email:</label>
				<input id="signup_email" type="email" maxlength="32" name="sign_email" required>
			</div>
			<div class="input_container">
				<label>Username:</label>
				<input id="signup_username" type="text" maxlength="100" name="sign_username" required>
			</div>
			<div class="input_container">
				<label>Password:</label>
				<input id="signup_password" type="password" maxlength="20" name="sign_password" required>
			</div>
			<div class="input_container">
				<label>Confirm Password:</label>
				<input id="signup_cPassword" type="password" maxlength="20" name="sign_cPassword" required>
			</div>
			<div id="sign_submit" class="input_container">
				<input id="signup_button" class="small" name="button" type="button" value="Sign Up" onClick="onSignUpSubmit()"
					onmouseover="this.style.background='#AAE4F7'" onmouseout="this.style.background='#F8E0F7'">
			</div>
		</form>
	</div>
</div>
</body>
</html>